<template>
  <div class="index">
    <!-- 头部搜索框 -->
    <div class="header">
      <div class="logo"><span class="iconfont icon-shangcheng"></span></div>
      <div class="searchBox">
        <van-search
          shape="round"
          v-model="inputValue"
          placeholder="请输入搜索关键字"
        />
      </div>
    </div>

    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="imageItem in bannerImgs" :key="imageItem.id">
        <router-link :to="imageItem.url">
          <van-image :src="imageItem.pic" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 首页轮播图 -->

    <!-- 首页宫格分类 -->
    <van-grid column-num="4" class="category_grid">
      <van-grid-item v-for="i in gridList" :key="i.id">
        <router-link :to="i.wap_url">
          <van-image :src="i.pic" />
          <div>{{ i.name }}</div>
        </router-link>
      </van-grid-item>
    </van-grid>
    <!-- 首页宫格分类 -->

    <!-- 新闻播报栏 -->
    <van-notice-bar
      mode="link"
      left-icon="phone"
      :scrollable="false"
      class="new_noticeBar"
    >
      <!-- 使用template-slot插槽法设置该（NoticeBar）组件的其他元素 -->
      <template v-slot:left-icon>
        <img
          class="notice-left-icon"
          src=""
        />
      </template>

      <!-- 上下滑动通知内容轮播 NoticeBar组件的默认文本内容（此处按需用了轮播组件，设置方向为竖）-->
      <van-swipe
        vertical
        :autoplay="3000"
        :show-indicators="false"
        class="notice-swipe"
      >
        <van-swipe-item v-for="i in notice" :key="i.id">{{
          i.info
        }}</van-swipe-item>
      </van-swipe>
      <!-- 上下滑动通知内容轮播 -->
    </van-notice-bar>
    <!-- 新闻播报栏 -->

    <!-- 快速选择 -->
    <div class="bottomMain">
      <Title-Check :itemInfo="info.fastInfo" :url="'/category'"><div>快速选择</div></Title-Check>
      <div class="fastSwipe">
        <ul>
          <li v-for="fastItem in info.fastList" :key="fastItem.id">
            <QuickItem :item="fastItem"></QuickItem>
          </li>
        </ul>
      </div>
      <!-- 快速选择 -->

      <!-- 精品推荐 -->
      <Title-Check  :Banner="info.bastBanner" :List="info.bastList" :itemInfo="info.bastInfo" :url="'/hot_new_goods'"><div>精品推荐</div></Title-Check>
      <!-- 精品推荐的轮播图 -->
      <van-swipe
        class="my-swipe bastSwipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="imageItem in info.bastBanner"
          :key="imageItem.id"
        >
          <router-link :to="imageItem.link">
            <van-image :src="imageItem.img" />
          </router-link>
        </van-swipe-item>
      </van-swipe>
      <ul class="bastList">
        <li v-for="bastItem in info.bastList" :key="bastItem.id">
          <BastItem :bastItem="bastItem"></BastItem>
        </li>
      </ul>
      <!-- 精品推荐 -->

      <!-- 首发新品 -->
      <Title-Check :itemInfo="info.firstInfo" :url="'/category'"><div>首发新品<span>NEW~</span></div></Title-Check>
      <ul class="firstList">
        <li v-for="firstItem in info.firstList" :key="firstItem.id">
          <FirstItem :item="firstItem"></FirstItem>
        </li>
      </ul>
      <!-- 首发新品 -->

      <!-- 促销单品 -->
      <Title-Check :itemInfo="info.salesInfo" :url="'/category'"><div>促销单品</div></Title-Check>
      <ul class="fastList">
        <li v-for="item in benefit" :key="item.id">
          <FastItem :item="item"></FastItem>
        </li>
      </ul>
      <!-- 促销单品 -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Swipe, SwipeItem, Image as VanImage } from "vant";
import TitleCheck from "../components/index/TitleCheck.vue";
import QuickItem from "../components/index/QuickItem";
import BastItem from "../components/index/BastItem";
import FastItem from "../components/index/FastItem";
import FirstItem from "../components/index/FirstItem";
export default {
  name: "Index",
  data() {
    return {
      bannerImgs: [],
      gridList: [],
      notice: [],
      inputValue: "",
      info: {}, //首页各种活动相关信息
      benefit: [], //促销单品列表
    };
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [VanImage.name]: VanImage,
    TitleCheck,
    QuickItem,
    BastItem,
    FastItem,
    FirstItem,
  },
  created() {
    //获取轮播图片的数据
    this.$axios.get("/api/index").then((d) => {
      console.log(d);
      this.bannerImgs = d.data.data.banner;
      this.gridList = d.data.data.menus;
      this.notice = d.data.data.roll;
      this.info = d.data.data.info;
      this.benefit = d.data.data.benefit; //促销单品，搞特殊，居然不在info里面
      // console.log("benefit==>", d.data.data.benefit);
    });
  },
};
</script>
<style lang="less" scoped>
.index {
  padding-bottom: 7vh;
  //头部搜索框
  .header {
    display: flex;
    .logo {
      padding: 0 0 0 3vw;
      padding-top: 0.8vh;
      span {
        font-size: 0.9rem;
      }
    }
    .searchBox {
      flex: 1;
    }
  }

  //轮播图
  .my-swipe {
    height: 24vh;
    .van-swipe-item {
      color: #fff;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  //商品分类宫格
  .category_grid {
    .van-grid-item {
      .van-image {
        width: 12vw;
        height: 12vw;
      }
      div {
        font-size: 0.33rem;
        color: rgb(75, 66, 66);
      }
    }
  }

  //新闻简报栏
  .new_noticeBar {
    border-top: 1px solid rgb(238, 232, 232);
    border-bottom: 1px solid #ccc;
    background: #fff;
    .notice-left-icon {
      height: 18px;
      border-right: 1px solid rgb(238, 232, 232);
      width: 60px;
      padding-right: 3vw;
    }
    .notice-swipe {
      font-size: 0.35rem;
      height: 60px;
      line-height: 60px;
      padding-left: 3vw;
    }
  }

  // 新闻简报下面的主要内容
  .bottomMain {
    overflow: hidden;
    .fastSwipe {
      margin: 0 4vw;
      overflow-x: scroll;
      // -webkit-overflow-scrolling: touch;
      text-align: justify;
      border-bottom: 1px solid #eee;
      &::-webkit-scrollbar {
        width: 0;
      }
      ul {
        display: flex;
        li {
          width: 23vw;
          height: auto;
          margin-right: 3vw;
          &:nth-child(3n + 1) {
            .quickItem {
              border-bottom: 2px solid green;
            }
          }
          &:nth-child(3n + 2) {
            .quickItem {
              border-bottom: 2px solid blue;
            }
          }
          &:nth-child(3n + 3) {
            .quickItem {
              border-bottom: 2px solid red;
            }
          }
        }
      }
    }

    // 精品推荐轮播图
    .bastSwipe {
      margin: 0 4vw;
    }
    //精品推荐商品列表
    .bastList {
      margin: 0 4vw;
    }

    //首发新品
    .firstList {
      display: flex;
      overflow-x: scroll;
      border-bottom: 1px solid rgb(231, 228, 228);
      margin: 0 4vw;
      &::-webkit-scrollbar {
        width: 0;
      }
      li {
        margin-right: 3vw;
      }
    }

    //促销单品列表
    .fastList {
      margin: 0 4vw;
    }
  }
  //快速选择
}
</style>
